<template>
	<div class="adm4">
		<p>
			<span style="margin-left: 10px;font-size: 20px; font-weight: bold;">订单列表</span>
			<el-button style="float: right;margin-right: 50px;" type="primary" @click='disvisible=true'>按条件查询</el-button>
		</p>
		<!--条件查询 -->
		<el-dialog v-model="disvisible" width="40%" title="订单查询">
			<el-form ref="form" label-width="150px" :model="form">
				<el-form-item label="从:">
					<el-input style="width: 300px;" type="date" v-model.lazy.trim="form.tstart"></el-input>
				</el-form-item>
				<el-form-item label="至:">
					<el-input style="width: 300px;" type="date" v-model.lazy.trim="form.tend"></el-input>
				</el-form-item>
				<el-form-item label="收货电话:">
					<el-input style="width: 300px;" v-model.lazy.trim="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="收货人:">
					<el-input style="width: 300px;" v-model.lazy.trim="form.nickname"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span>
					<el-button @click="disvisible = false , select()" type="primary">查询</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 订单列表 -->
		<el-table  border :data="user" style="width: 70%">
			<el-table-column prop="ordid" label="订单号"></el-table-column>
			<el-table-column prop="phone" label="电话"></el-table-column>
			<el-table-column prop="account" label="用户"></el-table-column>
			<el-table-column prop="amount" label="付款金额"></el-table-column>
			<el-table-column label="是否付款">
				<template #default='scope'>
					<span :class="{ 'cl' : scope.row.ispay }">{{onefil(scope.row.ispay)}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="addr" label="发货地址"></el-table-column>
			<el-table-column prop="shipno" label="快递单号"></el-table-column>
			<el-table-column label="下单时间">
				<template #default='scope'>
					{{tim(scope.row.tcreate)}}
				</template>
			</el-table-column>
			
			<el-table-column label="操作">
				<template #default='scope'>
					<!-- 明细 -->
					<el-popover placement="left" :width="500" trigger="click">
					    <template #reference>
					      <el-button @click='some(scope.row.ordid)'>明细</el-button>
					    </template>
					    <el-table :data="pic">
					     <el-table-column label="图片" v-slot='scope'>
							<el-image :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`" />
					     </el-table-column>
						 <el-table-column prop="name" label="商品名称"></el-table-column>
						 <el-table-column prop="price" label="商品价格"></el-table-column>
						  <el-table-column prop="num" label="商品数量"></el-table-column>
						   <el-table-column prop="price" label="小计"></el-table-column>
					    </el-table>
					</el-popover>
					
					<el-button v-if="scope.row.ispay" type="success">发货</el-button>
				</template>
			</el-table-column>
			
		</el-table>
		<!-- 分页器 -->
		<el-pagination
			background
			layout="prev , pager, next"
			:total="pagetatol"
			:page-size="nums"
			@current-change="nubs"
		>
		</el-pagination>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js'
	export default{
		name:'Adm4',
		data(){
			return{
				user:[],
				// 付款按钮
				bool:false,
				pagetatol:0 ,
				nums:10,
				page:1,
				//明细
				pic:[],
				disvisible:false,
				//查询
				form:{
					ispay:1,
					tstart:'',
					tend:'',
					phone:'',
					nickname:'',
					account:''
				},
				index:0
			}
		},
		methods:{
			nubs(id){
				this.index=id
				this.page=id
				instance.post("/api/adm/ord/findOrdInfo/"+id+"/10").then( (res)=>{
					if(res.status === 200){
						this.user=res.data.data.orders
					}
					}).catch( (error)=>{
						console.log(error)
				})
			},
			//点击明细，出现相对应的数据
			some(id){
				//那后台的数据
				instance.post('/api/adm/ord/findItemInfoByOrdid/'+id).then( (res)=>{
					//判断状态
					if( res.status === 200){
						this.pic=res.data.data
					}
				}).catch( (error)=>{
					console.log(error)
				})
			},
			// 搜索
			select(){
				let data={
					ispay:Number( this.form.ispay),
					tstart: new Date(this.form.tstart).getTime(),
					tend: new Date(this.form.tend).getTime(),
					phone:this.form.phone,
					nickname:this.form.nickname
				}
				instance.post('/api/adm/ord/findOrdInfo/'+this.index+'/10' ,  data ,{
					//告知服务器本次请求的方式以及编码
					headers : {'Content-Type' : 'application/json'},
				}).then( (res)=>{
					this.user=res.data.data.orders
				}).catch( (error)=>{
					console.log(error)
				})
			}
		},
		created() {
			//请求后台的数据
			instance.post('/api/adm/ord/findOrdInfo/1/10').then( (res)=>{
				//判断状态
				if( res.status === 200){
					//赋值
					this.user=res.data.data.orders
					console.log(typeof this.user[0])
					this.pagetatol=Math.ceil(res.data.data.total/this.page)
				}
			}).catch( (error)=>{
				console.log(error)
			})
		},
		computed:{
			//过滤是否付款
			onefil(){
				return (x)=>{
					if(x==0){
						return '未付款'
					}else if(x==1){
						return '已付款'
					}
				}
			},
			//过滤时间
			tim(){
				return (x)=>{
					let date = new Date(x)
					let Y = date.getFullYear()+'-'
					let M = date.getMonth()+1 <10 ? '0' + (date.getMonth()+1)+'-' : (date.getMonth()+1)+'-'
					let D = date.getDate()<10 ? '0' + date.getDate()+'' : date.getDate()+''
					return Y+M+D
				}
			}
		}	
	}
</script>

<style>
.adm4 p{
	line-height: 30px;
}
.el-pagination{
	padding-bottom: 50px;
	 text-align: center;
	 margin-top: 30px;
}
.cl{
	color: red;
	font-size: 10px;
}
</style>
